<template>
	<view class="">
		<Navbar :isReturn="true"></Navbar>
		<view class="u-m-l-28 u-m-r-28">
			<u-swiper :list="bannerList" border-radius="20" height="240" @click="goBannerUrl"></u-swiper>
			<view class="border_radius10 bgfff u-m-t-30 list_shadow u-p-t-24 u-p-r-18 u-p-b-28 u-p-l-22">
				<view class="u-m-l-20">
					<view class="u-line-2 u-m-b-20">
						<text :class="[detail.activity_status == 3 ? 'demand_end_tag' : 'demand_list_tag']"
							class="u-font-22 fontffff u-p-t-4 u-p-b-4 u-p-r-16 u-p-l-16">{{ handleGetStatus(detail.activityStatus) }}</text>
						<text class="u-font-30 u-p-l-20 font_weight_bold">{{ detail.title }}</text>
					</view>
					<text class="activity_time u-type-primary u-font-22">截止报名时间：{{ detail.deadline_time }}</text>
					<view class="u-m-t-16 u-line-1">
						<u-icon size="28" color="#999999" name="shijian" custom-prefix="custom-icon" />
						<text class="u-font-24 font9ff u-p-l-10">{{ detail.activity_time }}</text>
					</view>
					<view class="u-line-1">
						<u-icon size="28" color="#999999" name="didian" custom-prefix="custom-icon" />
						<text class="u-font-24 font9ff u-p-l-10">{{ detail.activity_site }}</text>
					</view>
					<view class="u-m-t-16 u-flex u-col-top">
						<text style="width: 120rpx;" class="u-font-26">报名费：</text>
						<!-- <view v-if="detail.activityInfo.price > 0">
							<text class="fontf849 u-font-28">{{ detail.activityInfo.price }}</text>
							<text class="u-font-26 fontf849"> 元/每人</text>
						</view> -->
						<text class="u-font-24 fontf849">{{ priceText }}</text>
					</view>
				</view>
			</view>
			<view class="bgfff list_shadow border_radius10 u-m-t-34 u-p-t-30 u-p-r-22 u-p-b-30 u-p-l-26">
				<text class="u-font-30 font_weight_bold u-type-primary">活动详情</text>
				<view style="user-select:text !important;-webkit-user-select" :user-select="true" class="u-m-t-16">
					<!-- <rich-text :nodes="detail.introduction"></rich-text> -->
					<u-parse class="pause_hid" :html="detail.introduction" :selectable="true" :tag-style="style"
						:lazy-load="true"></u-parse>
				</view>
			</view>
		</view>
		<view style="height: 220rpx;" />
		<view class="bottom_style demand_docking_button u-col-center list_shadow width100 s_flex u-row-between">
			<u-button v-if="detail.state == 1" @click="handleShowPopup" class="width100" type="primary">
				{{ handleGetState(detail.state) }}
			</u-button>
			<u-button v-else-if="detail.state == 5" :custom-style="auditCustomStyle" class="width100">
				{{ handleGetState(detail.state) }}
			</u-button>
			<u-button v-else :custom-style="customStyle" :disabled="true" class="width100">
				{{ handleGetState(detail.state) }}
			</u-button>
		</view>

		<register-modal :registerModal="registerModal" @close="registerModal = false" />
		<activity-signup-popup ref="signupSon" @chooseType="handleType" :detailId="detail.activityInfo.id"
			:lists="detail.activityInfo.ticket_info" />

		<u-popup v-model="ticketShow" mode="bottom" border-radius="20">
			<view class="u-p-30">
				<view class="u-font-title">选择票种</view>
				<view class="u-flex u-row-between u-ellipsis" :class="item.check ? 'ticket_check_box' : 'ticket_box'"
					v-for="item in ticketList" :key="item.id" @click="checkTicket(item)">
					<view class="u-ellipsis">
						<view class="u-font-32 u-font-bold u-ellipsis">{{item.name}}</view>
						<view class="u-font-30 u-m-t-10">余票（{{item.end_number}}张）</view>
					</view>
					<view class="u-font-title u-font-bold" :class="item.check ? 'u-color-white' : 'u-color-puce'">
						{{item.price}}</view>
				</view>
				<view class="ticker_btn" @click="handleConfirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import {
		getActivityDetail,
		addActivity,
		userActivitySign
	} from "@/network/demand.js"
	import { generateOrderSn, createOrder } from "@/network/api.js"
	import {
		activityStatus,
		changeTopBarBg,
		InitScene,
		throttle,
		formatRichText,
		activityState
	} from "@/utils/index.js"
	import RegisterModal from "@/components/RegisterModal.vue"
	export default {
		components: {
			Navbar,
			RegisterModal
		},
		data() {
			return {
				background: {
					background: "transparent"
				},
				btnCustomStyle: {
					border: "none"
				},
				customStyle: {
					backgroundColor: "#97999b",
					color: "#fff",
				},
				auditCustomStyle: {
					backgroundColor: "#F5602BFF",
					color: "#fff",
				},
				showPopup: false,
				form: {
					name: "",
					mobile: "",
					company: "",
					position: ""
				},
				formError: {
					name: "",
					mobile: "",
					company: "",
					position: ""
				},
				errorMessage: "3333",
				userid: "",
				detail: {},
				bannerList: [{
					img_wap: "https://cf.medv.com.cn/upload/e6b7879249c990ef8fadf8cd21c14916.png"
				}],
				activityId: "",
				registerModal: false,
				style: {
					div: 'padding: 0 !important',
				},
				priceText: "",
				scene: ''
			}
		},
		onPageScroll(res) {
			this.background = changeTopBarBg(res, this.background.background)
		},
		onLoad(options) {
			uni.showLoading()
			if (options.scene) {
				this.scene = options.scene
				options = {
					...InitScene(options.scene)
				}
			}
			const userid = uni.getStorageSync("userid")
			this.userid = userid
			this.activityId = options.id
			this.handleGetDetail(options.id)
		},
		onShareAppMessage() {
			const imageU = this.detail.img_wap || ""
			return {
				title: `活动：${this.detail.title}`,
				imageUrl: imageU,
				path: `/operate/privateActivity/privateActivity?scene=${this.scene}`
			}
		},
		methods: {
			handleType(item) {
				this.checkValue = item.id
				const suppl = this.detail.activityInfo.suppl
				if (item.end_number > 0) {
					// 免费  不用填写信息
					if (item.is_charge == 0 && suppl == 0) {
						userActivitySign({
							activity_id: this.activityId,
							ticket_id: item.id,
							user_id: this.userid
						}).then(() => {
							this.$refs.signupSon.handleShowPopup()
							this.handleGetDetail(this.activityId)
						})
						// 免费  需要填写信息
					} else if (item.is_charge == 0 && suppl == 1) {
						uni.navigateTo({
							url: `/pagesB/activitySignup/activitySignup?activity_id=${this.activityId}&id=${item.id}&is_charge=${item.is_charge}`
						})
						// 收费  不用填写信息
					} else if (item.is_charge == 1 && suppl == 0) {
						uni.navigateTo({
							url: `/pagesB/activityPay/activityPay?ticket_id=${item.id}&activity_id=${this.activityId}`
						})
						// 收费  需要填写信息
					} else {
						uni.navigateTo({
							url: `/pagesB/activitySignup/activitySignup?activity_id=${this.activityId}&id=${item.id}`
						})
					}
				}
			},
			handleShowPopup: throttle(async function() {
				if (!uni.getStorageSync("userid")) {
					uni.showToast({
						icon: "none",
						duration: 2000,
						title: "请先点击下方'前往小程序'方可报名",
					})
					return;
				}
				if (uni.getStorageSync("userStatus") == 0) {
					if (uni.getStorageSync("iv")) {
						uni.navigateTo({
							url: "/pagesB/register/register"
						})
					} else {
						this.registerModal = true
					}
				} else {
					if (this.detail.activityInfo.ticket_info.length == 1) {
						this.handleType(this.detail.activityInfo.ticket_info[0])
					} else {
						this.$refs.signupSon.handleShowPopup()
					}
					// const params = {
					// 	user_id: this.userid,
					// 	activity_id: this.activityId,
					// }
					// if (this.detail.activityInfo.price > 0) {
					// 	// uni.showLoading({
					// 	// 	title: '活动支付中',
					// 	// });
					// 	// await this.handlePay()
					// } else {
					// 	// uni.showLoading({
					// 	// 	title: '活动报名中',
					// 	// });
					// 	// 只有一个票种
					// 	if (this.detail.activityInfo.ticket_info.length == 1) {
					// 		this.handleType(this.detail.activityInfo.ticket_info[0])
					// 	} else {
					// 		this.$refs.signupSon.handleShowPopup()
					// 	}
					// 	// await addActivity(params).then(() => {
					// 	// 	uni.hideLoading()
					// 	// 	uni.showToast({
					// 	// 		icon: "none",
					// 	// 		duration: 2000,
					// 	// 		title: "报名成功"
					// 	// 	})
					// 	// })

					// }
				}
			}),
			handleGetStatus(ind) {
				return activityStatus()[ind]
			},
			handleGetState(ind) {
				return activityState()[ind]
			},
			handleGetDetail(id) {
				getActivityDetail({
					user_id: this.userid,
					activity_id: id
				}).then(res => {
					this.bannerList = [{
						img_wap: res.img_wap
					}]
					this.detail = {
						...res,
						introduction: res.introduction
					}
					this.priceText = res.activityInfo.ticket_info.map(item => `${item.name}: ${item.price}`).join(" / ")
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style lang="scss">
	.activity_time {
		background-color: #DFEEF9FF;
		border-radius: 16rpx 16rpx 16rpx 0px;
		padding: 6rpx 22rpx 6rpx 16rpx;
	}

	.activity_form {
		padding: 30rpx 28rpx;
	}

	.pause_hid {
		overflow: hidden !important;
	}

	// ::v-deep .interlayer {
	// 	width: 99% !important;
	// }

	::v-deep ._div,
	._p,
	._ol {
		padding: 2px !important;
	}

	// ::v-deep hr,
	// ::v-deep img,
	// ::v-deep table,
	// ::v-deep p {
	// 	width: 100% !important;
	// 	object-fit: contain;
	// 	margin: auto !important;
	// 	display: initial !important;
	// }
</style>